﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>网页效果整理</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="boot.js" type="text/javascript"></script> 
    <style type="text/css">
    body{margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;}    
    .header{background:url(header.gif) repeat-x 0 -1px;}
    </style>
</head>
<body>    

<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
    <div class="header" region="north" height="70" showSplit="false" showHeader="false">
        <h1 style="margin:0;padding:15px;cursor:default;font-family:'Trebuchet MS',Arial,sans-serif;">网页效果整理</h1>
    </div>
    <div title="south" region="south" showSplit="false" showHeader="false" height="30" >
        <div style="line-height:28px;text-align:center;cursor:default">Copyright © 51CTO技术部整理(绝对非盈利) </div>
    </div>
    <div title="center" region="center" bodyStyle="overflow:hidden;" style="border:0;">
        <!--Splitter-->
        <div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
            <div size="180" maxSize="250" minSize="100" showCollapseButton="true" style="border-width:1px;">
                <!--Tree-->
                <ul id="leftTree" class="mini-tree" url="listTree.txt" style="width:100%;height:100%;" 
                    showTreeIcon="true" textField="text" idField="id" resultAsTree="false"  
                    onnodeselect="onNodeSelect"
                >        
                </ul>
            </div>
            <div showCollapseButton="false" style="border:0px;" >
                <!--Tabs-->
                <div id="mainTabs" class="mini-tabs bg-toolbar" activeIndex="0" style="width:100%;height:100%;" >        
                    <div title="首页"> 
<pre>
[更新日志]
1 2013/4月份创建
2 2013/5/6 添加表单二级联动
3 2013/5/8 添加表单验证
</pre>
                    </div>

                </div>
            </div>        
        </div>
    </div>
</div>

    <script type="text/javascript">
        mini.parse();

        var tree = mini.get("leftTree");

        function showTab(node) {
            var tabs = mini.get("mainTabs");
			var tab = {title:node.text,showCloseButton:true};
			tab = tabs.addTab(tab);
			tabs.loadTab(node.url,tab)
			tabs.activeTab(tab);
        }

        function onNodeSelect(e) {
            var node = e.node;
            var isLeaf = e.isLeaf;

            if (isLeaf) {
                showTab(node);
            }

        }
    </script>

</body>
</html>